<template>
  <div>
    <h2>1.获取所有图书</h2>
    <button @click="getBooks">获取图书列表</button>

    <h2>2.获取指定图书</h2>
    <input v-model="bookname" type="text" name="" id="" />
    <button @click="getBook">获取指定图书</button>

    <h2>3.新增图书</h2>
    <input type="text" v-model="bookInfo.bookname" />
    <input type="text" v-model="bookInfo.author" />
    <input type="text" v-model="bookInfo.publisher" />
    <button @click="addBook">新增图书</button>
  </div>
</template>

<script>
// 1.下包 yarn add axios
// 2.导入 axios(哪里需要在哪里导入)
import axios from "axios";
// 设置基础地址 baseURL
axios.defaults.baseURL = "http://123.57.109.30:3006";

export default {
  // 注册组件
  // components: {
  //   LifeCycle,
  // },
  data() {
    return {
      // isShow: true,
      bookname: "",
      bookInfo: {
        bookname: "",
        author: "",
        publisher: "",
      },
    };
  },
  methods: {
    getBooks() {
      // 3.发送一个get请求
      axios({
        url: "/api/getbooks",
      }).then(({ data: res }) => {
        console.log(res.data);
      });
    },
    getBook() {
      axios({
        method: "get",
        url: "/api/getbooks",
        params: {
          bookname: this.bookname,
        },
      }).then(({ data: res }) => {
        console.log(res);
      });
    },
    addBook() {
      axios({
        method: "POST",
        url: "/api/addbook",
        data: {
          appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
          ...this.bookInfo,
        },
      }).then(({ data: res }) => {
        console.log(res);
      });
    },
  },
};
</script>

<style>
</style>
